<template>
  <div class="body">
    <section class="project-top">
      <div class="center-block">
        <div class="Crumbs clearfix">
          您的位置：
          <router-link to="/">首页<b>&gt;</b></router-link>
          <router-link to="/dataService">数据服务<b>&gt;</b></router-link>
          <a href="javascript:;">企业查询</a>
        </div>
        <div class="data-searchBox">
          <div class="indexSearchBox">
            <div class="input-group">
              <span class="input-group-btn"><i class="inSearchFdj dtFont dtFont-sousuo"></i></span>
              <input type="text" v-model="query.search" autocomplete="off" placeholder="请输入企业名称或统一社会信用代码进行查询"
                     class="form-control inputSearch">
              <span class="input-group-btn">
						    <button @click="btnSearch" class="btn btn-default" type="button">搜索</button>
					    </span>
            </div>
          </div>

          <div class="data-Ctrl">
            <h3 class="circular-title">筛选</h3>
            <div class="d-inputCtrl" @click="open=!open">
              <span>{{open?'收起':'展开'}}<i :class="open?'dtFont dtFont-shangla':'dtFont dtFont-xiala'"></i></span>
            </div>
          </div>

          <el-collapse-transition>
            <ul v-show="open" class="data-searchBoxSelcect">
              <li>
                <div>选择城市</div>
                <section class="city blockSelect">
                  <span v-for="(item,index) in city"
                        :key="index"
                        :class="{active:item.cityNum==query.cityNum}"
                        @click="tab(city,index)">{{item.cityName}}</span>
                </section>
              </li>
              <li>
                <div>资质类型</div>
                <section class="aptType blockSelect">
              <span v-for="(item,index) in aptType"
                    :key="index"
                    :class="{active:item.aptNum==query.aptNum}"
                    @click="tab(aptType,index)">{{item.aptName}}</span>
                </section>
              </li>
              <li>
                <div>服务类型</div>
                <section class="type blockSelect">
                <span v-for="(item,index) in serType"
                      :key="index"
                      :class="{active:item.serNum==query.serNum}"
                      @click="tab(serType,index)">{{item.serName}}</span>
                </section>
              </li>
            </ul>
          </el-collapse-transition>
        </div>
      </div>
    </section>
    <div class="result__captcha" id="captcha"></div>
    <section class="project-list">
      <div class="center-block">
        <div class="project-total">
          <p>查询结果：共<span>{{tableData.total}}</span>条</p>
        </div>
        <el-table :data="tableData.list" style="width: 100%" class="data-table">
          <el-table-column type="index" label="序号" width="60"></el-table-column>
          <el-table-column prop="compName" label="企业名称" width="405">
            <template slot-scope="scope">
              <router-link :to="`/dataService/company/detail?id=${scope.row.qyCompId}`" target="_blank">
                <span class="link">{{scope.row.compName}}</span>
              </router-link>
            </template>
          </el-table-column>
          <el-table-column prop="compCreditCode" label="统一社会信用代码" width="290"></el-table-column>
          <el-table-column prop="compCeoName" label="法定代表人" width="200"></el-table-column>
          <el-table-column prop="regionFullname" label="企业注册地"></el-table-column>
        </el-table>
        <div class="block" style="padding: 20px 0">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.pg"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="query.pgsz"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.total">
          </el-pagination>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
  import {getComList} from '@/api/dataService/index';

  export default {
    name: "company",
    data() {
      return {
        open: true,
        city: [
          {cityName: "全部", cityNum: ""},
          {cityName: "江西省", cityNum: "360000"},
          {cityName: "南昌", cityNum: "360100"},
          {cityName: "九江", cityNum: "360200"},
          {cityName: "上饶", cityNum: "360300"},
          {cityName: "景德镇", cityNum: "360400"},
          {cityName: "抚州", cityNum: "360500"},
          {cityName: "宜春", cityNum: "360600"},
          {cityName: "吉安", cityNum: "360700"},
          {cityName: "赣州", cityNum: "360800"},
          {cityName: "萍乡", cityNum: "360900"},
          {cityName: "新余", cityNum: "361000"},
          {cityName: "鹰潭", cityNum: "361100"},
          {cityName: "外省企业", cityNum: "361200"},
        ],
        aptType: [
          {aptName: "全部", aptNum: ""},
          {aptName: "防雷装置检测", aptNum: "350000"},
          {aptName: "职业卫生技术服务机构", aptNum: "350100"},
          {aptName: "环评检测", aptNum: "350200"},
          {aptName: "测绘", aptNum: "350300"},
          {aptName: "房地产估价机构", aptNum: "350400"},
          {aptName: "消防技术服务机构", aptNum: "350500"},
          {aptName: "建筑业企业", aptNum: "350600"},
          {aptName: "安全评价机构", aptNum: "350700"},
          {aptName: "施工图设计文件审查机构", aptNum: "350800"},
          {aptName: "林业调查规划设计", aptNum: "350900"},
          {aptName: "水文、水资源调查评价", aptNum: "351000"},
          {aptName: "职业卫生技术服务机构", aptNum: "351100"},
        ],
        serType: [
          {serName: "全部", serNum: ""},
          {serName: "咨询评估类", serNum: "340000"},
          {serName: "咨询评估类", serNum: "340100"},
          {serName: "规划设计类", serNum: "340200"},
          {serName: "造价咨询类", serNum: "340300"},
          {serName: "检测服务类", serNum: "340400"},
          {serName: "测量调查类", serNum: "340500"},
        ],
        tableData: {
          list: [],
          total: 0
        },
        query: {
          pg: 1,
          pgsz: 20,
          cityNum: '',
          aptNum: '',
          serNum: '',
          search:''
        },
      }
    },
    mounted() {
      this.getComList();
    },
    methods: {
      btnSearch() {
        this.getComList();
      },
      tab(obj, index) {
        if (obj === this.city) {
          this.query.cityNum = obj[index].cityNum;
        }else if (obj === this.aptType) {
          this.query.aptNum = obj[index].aptNum;
        }else{
          this.query.serNum = obj[index].serNum;
        }
        this.getComList();
      },
      handleSizeChange(val) {
        this.query.pgsz = val;
        this.getComList();
      },
      handleCurrentChange(val) {
        this.query.pg = val;
        this.getComList();
      },
      getComList(data) {
        this.query.search = this.$route.query.search || '';
        let {pg, pgsz, search, cityNum, aptNum, serNum} = this.query;
        data={pg, pgsz};
        if(this.query.cityNum!==""){
          data = Object.assign(data,{cityNum});
        }
        if(this.query.aptNum!==""){
          data = Object.assign(data,{aptNum});
        }
        if(this.query.serNum!==""){
          data = Object.assign(data,{serNum});
        }
        if(this.query.search!==""){
          data = Object.assign(data,{search});
        }
        // data = {pg, pgsz, value, cityNum, aptNum, serNum};
        getComList(data).then(res => {
          let {data} = res;
          this.tableData.list = res.rows;
          this.tableData.total = res.total;
          // console.log(res);
        })
      }
    }
  }
</script>

<style lang="less" scoped>
 /deep/ .el-table {
    &.data-table {
      background-color: transparent;
      tr,td, th {
        font-weight: 500;
        font-size: 16px;
        height: 60px;
        color: #9E9E9E;
        background-color: transparent;
      }
      td {
        color: #181F2A;
        a:hover{
          color: #216DE5;
        }
      }
    }
    &.tableSta{
      th:last-child{
        text-align: right;
      }
      td:nth-child(2){
        padding-right:40px;
      }
    }
    &.detail-table {
      background-color: transparent;
      tr,td, th {
        font-weight: 500;
        font-size: 14px;
        height: 60px;
        color: #9E9E9E;
        background-color: transparent;
      }
      td {
        color: #181F2A;
      }
    }
    &.text-right{
      th:nth-last-child(2),td:last-child{
        text-align: right !important;
      }
    }
  }

</style>
